<template>
<div style="padding-bottom: 50px;overflow-y: auto;">
        <div style="display:flex;padding:7px 16px 7px 16px;align-items: center;">
          <!-- <van-dropdown-menu active-color="#f56d6d">
            <van-dropdown-item :title="option1[dropdownvalue].text" ref="dropdownItem">
              <van-cell :style="(dropdownvalue==0?'color:#f56d6d':'color:#323233')" center title="最新发帖" @click="dropdownIndex('0')"></van-cell>
              <van-cell :style="(dropdownvalue==1?'color:#f56d6d':'color:#323233')" center title="最新回复" @click="dropdownIndex('1')"></van-cell> -->
              <!-- <van-cell :style="(dropdownvalue==2?'color:#f56d6d':'color:#323233')" center title="最多回复" @click="dropdownIndex('2')"></van-cell>
              <van-cell :style="(dropdownvalue==3?'color:#f56d6d':'color:#323233')" center title="最多点击" @click="dropdownIndex('3')"></van-cell> -->
            <!-- </van-dropdown-item> -->
          <!-- </van-dropdown-menu> -->
          <!-- <span  class="color-red font14">最新回复<van-icon name="arrow-down" /></span> -->
          <!-- <div @click="toSearchList(searchTitle)" style="flex:1;border:1px solid #E99D42;border-radius:18px;padding:0px 0px 0px 10px;display:flex;">
            <input class="font12" readonly v-model="searchTitle" type="search" placeholder="关键字搜索" style="border:none;flex:1;margin:5px">
            <div style="background:#E99D42;display:flex;align-items: center;width:50px;border-radius:18px;justify-content:center;"  >
               <van-icon name="search" size='24px'  color="#eee"/>
            </div>
          </div>   -->
          <div @click="toSearchList()" style="border-radius:5px;display:flex;align-items:center;justify-content:center;width:100%;background-color:#EFEFEF;padding:5px">
              <van-icon name="search" size="20px" color="#BEBEBE"/>
              <span style="color:#BEBEBE" class="font13">关键字搜索</span>
          </div>     
        </div>
        <van-divider  :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
        <div class="tabview" @click="changeView('2')">
                <div style="flex: 1;display:flex" class="font18" v-if="allmenus[0]"
                 @click="toNext2(allmenus[0].name,allmenus[0].id)" @click.stop.prevent=''>
                    <img :src="require('../../assets/images/menu_icon2.png')" class="menu_img">{{allmenus[0].name}}</div>
                <van-icon  name="arrow-up" color="#969799" size="16px" 
                            :class="[ showTabView2==true?'tabview_icon_up':'tabview_icon_down']"/></div>
                <van-divider class="tabview_divider"/>
        <div v-if="allmenus[0]&&itemNameList[0].length > 0" class="tabview_list">
              <div v-for="(item,index) in (showTabView2?itemNameList[0]:itemNameList[0].slice(0,3))" 
              :key='index' class="mt6 mb6" @click="todetail(allmenus[0].name,item)">
                <span v-if="item.categoryName" class="color-red">[{{item.categoryName}}]</span>
                <span class="color-2">{{item.title}}</span>
            </div>
        </div>
        <van-divider v-if="itemNameList[1]" :style="{  borderColor: '#F7F7F7',margin: '0px' ,borderWidth: '5px 0 0'}"></van-divider>
        <div class="tabview" @click="changeView('1')">
                <div style="flex: 1;display:flex" class="font18" v-if="topNameList[0]" 
                @click="toNext2(topNameList[0].name,topNameList[0].id)" @click.stop.prevent=''>
                    <img :src="require('../../assets/images/menu_icon1.png')" class="menu_img">{{topNameList[0].name}}</div>
                <van-icon  name="arrow-up" color="#969799" size="16px" 
                            :class="[ showTabView1==true?'tabview_icon_up':'tabview_icon_down']"/></div>
                <van-divider class="tabview_divider"/>
        <div v-if="topNameList[0]&&topNameList[0].contents.content.length > 0" class="tabview_list">
            <div v-for="(item,index) in (showTabView1?topNameList[0].contents.content:topNameList[0].contents.content.slice(0,3))" 
            :key='index' class="mt6 mb6" @click="todetail(topNameList[0].name,item)">
                <span v-if="item.categoryName" class="color-red">[{{item.categoryName}}]</span>
                <span class="color-2">{{item.title}}</span>
            </div>
        </div>
        <van-divider v-if="allmenus[0]" :style="{  borderColor: '#F7F7F7',margin: '0px' ,borderWidth: '5px 0 0'}"></van-divider>
        <div class="border_item">
              <div class="tabview2" @click="toNext(allmenus[1].name,allmenus[1].id)">
                <div style="flex: 1;display:flex;font-weight: bold;" class="font16" v-if="allmenus[1]">
                  {{allmenus[1].name}}</div>
                  <van-icon name="arrow" size="20px"/>
              </div>
              <van-divider class="tabview_divider"/>
              <div v-if="allmenus[1]&&itemNameList[1].length > 0"  class="tabview_list2">
                <div v-for="(item,index) in itemNameList[1].slice(0,5)" 
                    :key='index' class="mt3 " @click="todetail(allmenus[1].name,item)">
                  <span class="span_item">
                    <span v-if="item.categoryName" class="color-red ">[{{item.categoryName}}] <span class="color-2">{{item.title}}</span></span>
                    <span v-else class="color-red "><span class="color-2">{{item.title}}</span></span>
                  </span>
                </div>
              </div>
            </div>
           <div class="border_item">
              <div class="tabview2" @click="toNext(allmenus[2].name,allmenus[2].id)">
                <div style="flex: 1;display:flex;font-weight: bold;" class="font16" v-if="allmenus[2]">
                  {{allmenus[2].name}}</div>
                  <van-icon name="arrow" size="20px"/>
              </div>
              <van-divider class="tabview_divider"/>
              <div v-if="allmenus[2]&&itemNameList[2].length > 0"  class="tabview_list2">
                <div v-for="(item,index) in itemNameList[2].slice(0,5)" 
                    :key='index' class="mt3 " @click="todetail(allmenus[2].name,item)">
                  <span class="span_item">
                    <span v-if="item.categoryName" class="color-red ">[{{item.categoryName}}] <span class="color-2">{{item.title}}</span></span>
                    <span v-else class="color-red "><span class="color-2">{{item.title}}</span></span>
                  </span>
                </div>
              </div>
            </div>
        <!-- <div class="flex_center_h_sb"> 
            
        </div> -->
          <div class="border_item">
              <div class="tabview2" @click="toNext(allmenus[3].name,allmenus[3].id)">
                <div style="flex: 1;display:flex;font-weight: bold;" class="font16" v-if="allmenus[3]">
                  {{allmenus[3].name}}</div>
                  <van-icon name="arrow" size="20px"/>
              </div>
              <van-divider class="tabview_divider"/>
              <div v-if="allmenus[3]&&itemNameList[3].length > 0"  class="tabview_list2">
                <div v-for="(item,index) in itemNameList[3].slice(0,5)" 
                    :key='index' class="mt3 " @click="todetail(allmenus[3].name,item)">
                  <span class="span_item">
                    <span v-if="item.categoryName" class="color-red ">[{{item.categoryName}}] <span class="color-2">{{item.title}}</span></span>
                    <span v-else class="color-red "><span class="color-2">{{item.title}}</span></span>
                  </span>
                </div>
              </div>
            </div>
           <div class="border_item">
              <div class="tabview2" @click="toNext(allmenus[4].name,allmenus[4].id)">
                <div style="flex: 1;display:flex;font-weight: bold;" class="font16" v-if="allmenus[4]">
                  {{allmenus[4].name}}</div>
                  <van-icon name="arrow" size="20px"/>
              </div>
              <van-divider class="tabview_divider"/>
              <div v-if="allmenus[4]&&itemNameList[4].length > 0"  class="tabview_list2">
                <div v-for="(item,index) in itemNameList[4].slice(0,5)" 
                    :key='index' class="mt3 " @click="todetail(allmenus[4].name,item)">
                  <span class="span_item">
                    <span v-if="item.categoryName" class="color-red ">[{{item.categoryName}}] <span class="color-2">{{item.title}}</span></span>
                    <span v-else class="color-red "><span class="color-2">{{item.title}}</span></span>
                  </span>
                </div>
              </div>
            </div>
        <!-- <div class="flex_center_h_sb"> 
          
        </div> -->
       <!-- <van-collapse  v-model="activeNames" accordion :border="false" @change="changeCollapse" >
            <van-collapse-item name="1" v-if="itemNameList[1]">
                <template #title>
                    <div   style="display:flex">
                        <div @click="toNext(itemNameList[1].name,itemNameList[1].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon3.png')" class="menu_img">{{itemNameList[1].name}}</div>
                    </div>
                </template>
                <div  v-for="(item,index) in itemNameList[1].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[1].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
             <van-divider v-if="itemNameList[2]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
            <van-collapse-item name="2" v-if="itemNameList[2]">
                <template #title>
                    <div style="display:flex">
                        <div @click="toNext(itemNameList[2].name,itemNameList[2].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon4.png')" class="menu_img">{{itemNameList[2].name}}</div>
                    </div>
                </template>
                <div v-for="(item,index) in itemNameList[2].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[2].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
             <van-divider v-if="itemNameList[3]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
            <van-collapse-item name="3" v-if="itemNameList[3]">
                <template #title>
                    <div style="display:flex">
                        <div @click="toNext(itemNameList[3].name,itemNameList[3].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon5.png')" class="menu_img">{{itemNameList[3].name}}</div>
                    </div>
                </template>
                <div v-for="(item,index) in itemNameList[3].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[3].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
             <van-divider v-if="itemNameList[4]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
            <van-collapse-item name="4" v-if="itemNameList[4]">
                <template #title>
                    <div style="display:flex">
                        <div @click="toNext(itemNameList[4].name,itemNameList[4].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon6.png')" class="menu_img">{{itemNameList[4].name}}</div>
                    </div>
                </template>
                <div v-for="(item,index) in itemNameList[4].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[4].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
        </van-collapse> -->

</div>
  
</template>
<script>
import {findAllIndex,findAllBoutique,findAllMenu,queryMenuContent} from '@/api/gettodo'
import {mapGetters} from "vuex"
import { Notify,Dialog, Toast } from 'vant'
   export default{
       name:'newhome',
       data() {
            return {
              activeNames: '',
              newsLits:[{type:"类型1",title:"标题1"},{type:"类型2",title:"标题2"},{type:"类型3",title:"标题3"},
                          {type:"类型4",title:"标题4"},{type:"类型5",title:"标题5"},{type:"类型6",title:"标题6"},{type:"类型6",title:"标题6"}
                          ,{type:"类型6",title:"标题6"},{type:"类型6",title:"标题6"}],
              hotNewsLits:[{type:"hot类型1",title:"标题1"},{type:"hot类型2",title:"标题2"},{type:"hot类型3",title:"标题3"},
                              {type:"hot类型4",title:"标题4"},{type:"hot类型5",title:"标题5"},{type:"hot类型6",title:"标题6"}],
              showTabView1:false,
              showTabView2:false,  
              topNameList:[],   
              // itemNameList:[],  
              dropdownvalue:1,
              option1: [
                { text: '最新发帖', value: 0 },
                { text: '最新回复', value: 1 },
                // { text: '最多回复', value: 2 },
                // { text: '最多点击', value: 3 },
              ], 
              searchTitle:'关键字搜索',   
              gettodoListQuery:{direction:'desc',properties:'modifiedTime',},
              searchLastCommentTime:'', //最新回复
              searchMostComment:'', //最多回复  
              allmenus:[],
              itemNameList:[0,1,2,3,4],     
            };
       },
       computed:{
            ...mapGetters(['user']),
        },
       created(){
           this.getNewsList()
       },
      //  activated(){
      //   //  this.topNameList=[];
      //   //  this.allmenus=[];
      //   //  this.itemNameList=[0,1,2,3,4];
      //    this.getNewsList()
      //  },
       methods:{
            getNewsList(){
                Toast.loading({
                    message:'加载中',
                    forbidClick:false
                });
                findAllBoutique(Object.assign({userName:this.user.userName}))
                    .then((result)=>{
                        Toast.clear();
                        if(!result.data){
                            Notify(result.message);
                            return;
                        }
                        if(result.data.data){
                            this.topNameList=result.data.data;
                        }
                        this.findAllMenu();
                    })
            },
            //  getCollapseItemName(){
            //     Toast.loading({
            //         message:'加载中',
            //         forbidClick:false
            //     });
            //     findAllIndex(Object.assign({userName:this.user.userName},{listQuery: this.gettodoListQuery},
            //       {fromdetaildata:{ searchLastCommentTime:this.searchLastCommentTime,
            //       searchMostComment:this.searchMostComment}}))
            //         .then((result)=>{
            //             Toast.clear();
            //             if(!result.data){
            //                 Notify(result.message);
            //                 return;
            //             }
            //             if(result.data.data){
            //                 this.itemNameList=result.data.data;
            //             }
            //         })
            // },
            findAllMenu(){
                Toast.loading({
                    message:'加载中',
                    forbidClick:false
                });
                findAllMenu(Object.assign({userName:this.user.userName}))
                    .then((result)=>{
                        Toast.clear();
                        if(!result.data){
                            Notify(result.message);
                            return;
                        }
                        if(result.data.data){
                            this.allmenus=result.data.data;
                        }
                        if(this.allmenus.length>0){
                          for(var a=0;a<this.allmenus.length;a++){
                            this.queryMenuContent(this.allmenus[a].id, a);
                          }
                        }else{
                          Notify('暂无栏目数据');
                        }
                        
                    })
            },
            queryMenuContent(menuId, menuNumber){
                Toast.loading({
                    message:'加载中',
                    forbidClick:false
                });
                queryMenuContent(Object.assign({userName:this.user.userName},{id:menuId}))
                    .then((result)=>{
                        Toast.clear();
                        if(!result.data){
                            Notify(result.message);
                            return;
                        }
                        if(result.data.data.content){
                            this.$set(this.itemNameList, menuNumber, result.data.data.content)
                            // this.itemNameList[menuNumber]=result.data.data.content;
                        }
                    })
            },
            toNext(value,parentId){
                console.log('当前点击的栏目是第'+value+'个'+parentId);
                 this.$router.push({
                    name:'newColorfulLife',
                    query:{
                        parentId:parentId,
                        title:value
                    }
                });
            },
            toNext2(value,parentId){
                console.log('当前点击的栏目是第'+value+'个'+parentId);
                if(parentId=='UCAT713313871358373888'){ //20240725额外增加一个鹤壁分公司类型
                  this.$router.push({
                    name:'newColorfulLife',
                    query:{
                        parentId:parentId,
                        title:value
                    }
                  });
                }else{
                  this.$router.push({
                    name:'onlyword',
                    query:{
                        parentId:parentId,
                        title:value
                    }
                  });  
                }
                
            },changeView(value){
                console.log('打开关闭前两个'+value);
                if(value=='1'){
                     this.showTabView1=!this.showTabView1;
                     this.showTabView2=false;
                }else{
                     this.showTabView2=!this.showTabView2;
                     this.showTabView1=false;
                }
                this.activeNames='';
            },changeCollapse(value){
                 console.log('改变的条目id'+value);   
                 if(value){
                    this.showTabView1=false;
                    this.showTabView2=false;
                 }
            },todetail(index,item){
                console.log('点击的条目是'+index+'id是'+item.id)
                var titleName=''
                if(item.categoryName){
                  titleName=item.parentCategoryName+'-'+item.categoryName
                }else{
                  titleName=item.parentCategoryName
                }
                this.$router.push({
                    path: "/newcolordetail",
                    query: { 
                        itemId: item.id,
                        title : titleName
                    },
                });
            },
            toSearchList(){
              this.$router.push({
                name:'onlyword',
                query:{
                    parentId:'',
                    title:'搜索',
                    searchTitle:'',
                    isSearch:true,
                }
              });
            },
            dropdownIndex(value){
              this.dropdownvalue=value
              this.$refs.dropdownItem.toggle();
              if(value==0){ //最新发帖
                this.gettodoListQuery.direction='desc'
                this.gettodoListQuery.properties='modifiedTime'
                this.searchLastCommentTime=''
                this.searchMostComment=''
                this.getNewsList()
              }else if(value==1){ //最新回复
                this.gettodoListQuery.direction=''
                this.gettodoListQuery.properties=''
                this.searchLastCommentTime='true'
                this.searchMostComment=''
                this.getNewsList()
              }else if(value==2){ //最多回复
                this.gettodoListQuery.direction=''
                this.gettodoListQuery.properties=''
                this.searchLastCommentTime=''
                this.searchMostComment='true'
                this.getNewsList()
              }else if(value==3){ //最多点击
                this.gettodoListQuery.direction='desc'
                this.gettodoListQuery.properties='isTop,displayOrder'
                this.searchLastCommentTime=''
                this.searchMostComment=''
                this.getNewsList()
              }
            }
       }
   }
</script>
<style scoped>
.tabview{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
.tabview2{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding:0px 5px 5px 5px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    margin-top:5px
}
.tabview_icon_up{
    transition: all 0.3s;
    margin-left: 4px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 0px  0px 0px 12px;
}
.tabview_icon_down{
    transform:rotate(180deg);
    transition: all 0.3s;
    margin-left: 4px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    padding: 0px 12px 0px 0px ;
}
.tabview_divider{
    padding-left: 16px;
    padding-right: 16px;
    background-color: #fff;
    margin:0px
}
.tabview_list{
    padding: 0px 16px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5; 
    background-color: #fff;
}
.tabview_list2{
    padding: 0px 5px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5; 
    background-color: #fff;
}
.menu_img{
    margin-right:5px;
    width:22px;
    height:22px
}
::v-deep .van-collapse-item__content {
    padding: 0px 16px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
}
.border_item{
  border:1px solid #F76E20;
  border-radius:10px;
  flex:1;
  margin:10px;
  width: 95%;
  padding: 5px;

}
/* 只展示一行。省略展示， */
.span_item{ 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: inline-block;
}
::v-deep .van-dropdown-menu__title{
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 8px 0 0;
  color: #f56d6d;
  font-size: 14px;
  line-height: 22px;
}
::v-deep .van-dropdown-menu__bar{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 30px;
  background-color: #fff;
  box-shadow: none;
}
::v-deep .van-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0);
}
</style>